<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .badge {
         
          /* 弹性布局，子项水平垂直居中 */
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 30px; 
          height: 100px;
          width: 100px;

          background-color: #ddd;
          color: #fff;
          border-radius: 9999px; /*圆半径*/
        }
      </style>
</head>
<body>
    <div class="badge">1</div>
</body>
</html>